<div id="color_picker_container">
    <div class="pull-left" id="color__col1">
        <div id="saturation_value_picker" class="pull-left">
            <img src="{{saturation_value_path}}" />
            <div id="saturation_value_marker"></div>
        </div>
        <div id="hue_picker" class="pull-left">
            <img src="{{hue_path}}" />
            <div id="hue_marker"></div>
        </div>
    </div>
    <div id="color__col2">
        <div class="pull-left"> 
            <div id="sample" class="sample"></div>
            <div id="color_inputs">
                <div class="pull-left compound_color">
                    <div class="pull-right color_component">
                        <label for="red_input">R:</label>
                        <input id="red_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="green_input">G:</label>
                        <input id="green_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="blue_input">B:</label>
                        <input id="blue_input" type="text" pattern="\d*" />
                    </div>
                </div>
                <div class="pull-left compound_color">
                    <div class="pull-right color_component">
                        <label for="hue_input">H:</label>
                        <input id="hue_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="saturation_input">S:</label>
                        <input id="saturation_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="value_input">V:</label>
                        <input id="value_input" type="text" pattern="\d*" />
                    </div>
                </div>
                <div class="pull-left compound_color">
                    <div class="pull-right color_component">
                        <label for="cyan_input">C:</label>
                        <input id="cyan_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="magenta_input">M:</label>
                        <input id="magenta_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="yellow_input">Y:</label>
                        <input id="yellow_input" type="text" pattern="\d*" />
                    </div>
                    <div class="pull-right color_component">
                        <label for="black_input">K:</label>
                        <input id="black_input" type="text" pattern="\d*" />
                    </div>
                </div>
                <div class="simple_color">
                    <label for="hex_input">#</label>
                    <input id="hex_input" type="text" />
                </div>
            </div>
        </div>
        <div id="palette" class="pull-left">
            <select id="palette_select">
                <option value="analogous" selected="true">Analogous</option>
                <option value="triad">Triad</option>
                <option value="tetrad">Tetrad</option>
            </select>
            <div id="palette_sample_0" class="palette_sample sample"></div>
            <label for="palette_input_0">#</label>
            <span id="palette_input_0" class="palette_input"></span>

            <div id="palette_sample_1" class="palette_sample sample"></div>
            <label for="palette_input_1">#</label>
            <span id="palette_input_1" class="palette_input"></span>

            <div id="palette_sample_2" class="palette_sample sample"></div>
            <label for="palette_input_2">#</label>
            <span id="palette_input_2" class="palette_input"></span>
        </div>
    </div>
</div>